<!DOCTYPE html>
<html class="overflow-hidden">
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <meta name="apple-mobile-web-app-capable" content="no"/>
    <meta name="wap-font-scale" content="no">
    <meta content="telephone=no" name="format-detection">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>礼仪之邦-提交订单</title>
    <link rel="stylesheet" href="css/bootstrap.min.css"/>
    <link rel="stylesheet" href="css/swiper.min.css"/>
    <link rel="stylesheet" href="css/public.css"/>
    <link rel="stylesheet" href="css/app.css"/>
</head>
<body class="overflow-hidden">
<div class="collect-bar register-bar setting-bar" style="background: #f5f5f5;">
    <h2 class="header-box pos-abs-tl">
        <a class="go-back-btn sprite-icon" href="#"></a>
        提交订单
    </h2>

    <div class="collect-cont">
        <div class="order-time">
            <label>订单有效时间：</label>
            <span class="timeHour">23</span>时
            <span class="timeMinute">59</span>分
            <span class="timeSecond">59</span>秒
        </div>
        <div class="order-tips">
            <label>订单提交成功</label>
            <!--<span>订单号：1255412225442222</span>-->
            <span>应付金额：￥ 82.80</span>
            <a href="#">查看详情</a>
        </div>
        <div class="group-box mar-t15">
            <h2 class="group-title">支付方式</h2>
            <ul style="height:138px;">
                <li class="active">
                    <a href="javascript:;">
                        <div class="group-left">
                            <div class="group-icon">
                                <i class="change-sprite-icon icon-weixin"></i>
                                <label>
                                    <span>微信支付</span>
                                    <span class="f9">微信安全支付</span>
                                </label>
                            </div>
                        </div>
                        <div class="group-right">
                            <span class="change-sprite-icon has-icon"></span>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="javascript:;">
                        <div class="group-left">
                            <div class="group-icon">
                                <i class="change-sprite-icon icon-yijifu"></i>
                                <label>
                                    <span>快捷支付</span>
                                    <span class="f9">银行卡快捷支付服务</span>
                                </label>
                            </div>
                        </div>
                        <div class="group-right">
                            <span class="change-sprite-icon has-icon"></span>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="javascript:;">
                        <div class="group-left">
                            <div class="group-icon">
                                <i class="change-sprite-icon icon-yinlian"></i>
                                <label>
                                    <span>中国银联</span>
                                    <span class="f9">网银支付服务</span>
                                </label>
                            </div>
                        </div>
                        <div class="group-right">
                            <span class="change-sprite-icon has-icon"></span>
                        </div>
                    </a>
                </li>
                <li class="none">
                    <a href="javascript:;">
                        <div class="group-left">
                            <div class="group-icon">
                                <i class="change-sprite-icon icon-yucunkuan"></i>
                                <label>
                                    <span>预存货款</span>
                                    <span class="f9 red">余额：￥153</span>
                                </label>
                            </div>
                        </div>
                        <div class="group-right">
                            <span class="none-icon">余额不足</span>
                            <!--<span class="change-sprite-icon has-icon"></span>-->
                        </div>
                    </a>
                </li>
                <li>
                    <a href="javascript:;">
                        <div class="group-left">
                            <div class="group-icon">
                                <i class="change-sprite-icon icon-zhifubao"></i>
                                <label>
                                    <span>支付宝</span>
                                    <span class="f9">支付宝支付服务</span>
                                </label>
                            </div>
                        </div>
                        <div class="group-right">
                            <span class="change-sprite-icon has-icon"></span>
                        </div>
                    </a>
                </li>
            </ul>
            <span class="show-more more-order">其他支付方式<i class="change-sprite-icon down-arrow"></i></span>
        </div>

        <div class="login-btn active mar-t15" id="payBtn"><a class="f14" href="javascript:;">确认支付 ￥130.00</a></div>
        <p class="pay-tips">部分支付方式由易级付提供</p>
    </div>

    <!--预存款支付弹窗-->
    <div id="advanceBar" class="disk">
        <div class="advance-window animated j-alert-ani">
            <h2 class="advance-tips">
                <!--没有支付密码-->
                <span style="display: none;">由于您未设置支付密码，首次输入后将作为您的默认 支付密码</span>
                <!--有支付密码-->
                <span>为了保证您的资金安全，请输入支付密码进行支付</span>
            </h2>

            <div class="advance-money">
                <span>订单应付金额：<i>78.50元</i></span>
                <span>预存货款支付：<i>50.50元</i></span>
            </div>
            <div class="pay-password">
                <div class="form-list">
                    <ul>
                        <!--没有支付密码-->
                        <li style="display: none;">
                            <span>支付密码</span>
                            <label><input class="" type="password" value="" placeholder="6-20位字母、数字和特殊字符组合"></label>
                        </li>
                        <!--有支付密码-->
                        <li class="big-padding">
                            <span>支付密码</span>
                            <label><input class="" type="password" value="" placeholder="请输入支付密码"></label>
                            <a class="forget-pwd" href="#">忘记密码</a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="pay-btns">
                <a class="active" href="javascript:;">确认支付</a>
                <a id="cancel" href="javascript:;">取消</a>
            </div>
        </div>
    </div>
</div>


<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/iscroll.js"></script>
<script src="js/box.js"></script>
<script src="js/public.js"></script>
<script>
    $(function () {
        //订单时间
        publicFuns.timeDown(".order-time", 24 * 60 * 60, endFun);
        function endFun() {
            console.log("倒计时结束了！");
        }

        //现实更多
        $(".show-more").click(function () {
            var that = this;
            $(that).hide();
            $(".group-box ul").css({"height": "auto"});
        });

        $(".group-box li").click(function () {
            if ($(this).hasClass("none") || $(this).hasClass("active")) {
                return false;
            } else {
                $(this).addClass("active").siblings().removeClass("active");
            }
        });

        //支付按钮
        $("#payBtn").click(function () {
            $("#advanceBar").fadeIn(300);
        });

        //取消
        $("#cancel").click(function () {
            $("#advanceBar").fadeOut(300);
        });
    })
</script>
</body>
</html>